.slide {
  @apply w-screen relative max-h-screen overflow-hidden;
  height: 44.7916vw;

  &:hover {
    .switchLeft,
    .switchRight {
      width: 7.375rem;
    }
  }

  .bg {
    @apply object-cover max-h-screen w-screen;
    background-size: center;
    height: 44.7916vw;
  }

  .bannerTab {
    @apply absolute w-full left-0;
    z-index: 100;
    top: 6.25rem;
    padding-left: 3.375rem;
  }

  .switch {
    @apply h-full flex items-center justify-center absolute top-0 z-3 w-0;
    transition: all 0.3s;

    & > img {
      @apply cursor-pointer;
      width: 1.1875rem;
      height: 2.0625rem;

      &:hover {
        content: url('/images/ar_active.png');
      }
    }

    &.switchLeft {
      @apply left-0;
      background: linear-gradient(to right, #212121 0%, rgba(33, 33, 33, 0) 100%);

      & > img {
        transform: rotate(-180deg);
      }
    }

    &.switchRight {
      @apply right-0;
      background: linear-gradient(to left, #212121 0%, rgba(33, 33, 33, 0) 100%);
    }
  }

  // 分页
  .pagination {
    @apply absolute z-3 w-full left-0 bottom-0 text-right bg-linear-banner;
    height: 7.5rem;

    .items {
      margin-right: 8.125rem;

      .item {
        @apply inline-block bg-white opacity-60;
        transition: width 0.3s;
        width: 0.375rem;
        height: 0.375rem;
        border-radius: 0.375rem;
        margin-left: 0.875rem;

        &.itemActive {
          @apply w-4 opacity-100;
        }
      }
    }
  }

  // 描述信息
  .desc {
    @apply absolute z-4;
    left: 8.125rem;
    bottom: 24.88%;
    .firstSeries {
      @apply text-white font-normal;
      font-size: 3.75rem;
      font-family: STSongti-SC-Black;
      line-height: 3.75rem;
      max-width: 42.5rem;
    }

    .secondSeries {
      @apply text-white text-base font-normal;
      max-width: calc(100vw - 2rem);
      margin-top: 3.125rem;
      margin-bottom: 6.125rem;
    }

    .btnGroup {
      @apply mt-12;

      .btn {
        @apply bg-white;
        width: 8.75rem;
        height: 2.875rem;

        &:hover {
          @apply bg-white-60;
        }

        & > span {
          @apply font-semibold;
        }

        &.btnDetail {
          @apply bg-white-10 ml-4;

          &:hover {
            @apply bg-white-40;
          }

          & > span {
            @apply text-white;
          }
        }
      }
    }
  }

  .leftMask {
    @apply h-full absolute left-0 top-0 z-2;
    width: 60%;
    background: linear-gradient(90deg, #141414 0%, rgba(20, 20, 20, 0) 100%);
  }
}

// 移动端
@media screen and (max-width: 767px) {
  .slidePhone {
    margin-top: 3.125rem;
    height: 117.33vw !important;

    .bg {
      @apply object-cover max-h-screen w-screen relative;
      background-size: center;
      height: 117.33vw !important;
    }

    .bannerTabPhone {
      @apply px-4 top-6 h-10 pt-2 flex items-end;
      z-index: var(--pop-index);
      height: 2.5rem;
    }

    .switch {
      @apply hidden;
    }

    .mask {
      @apply relative;

      &::after {
        @apply absolute w-screen bottom-0 left-0 z-1;
        content: '';
        height: 10rem;
        background: linear-gradient(to bottom, rgba(20, 20, 20, 0) 0%, #141414 100%);
      }

      // 描述信息
      .desc {
        @apply w-full px-4 absolute z-4 left-0 bottom-10 flex flex-col items-center;

        .firstSeries {
          font-size: 1.875rem;
          line-height: 1.875rem;
          max-width: 100%;
        }

        .secondSeries {
          @apply text-sm;
          margin: 0.625rem 0;
        }

        .btnGroup {
          margin-top: 0.625rem;

          .btn {
            width: 5rem;
            height: 1.875rem;

            &:hover {
              @apply bg-white;
            }

            & > img {
              @apply w-4 h-4;
            }

            & > span {
              @apply text-xs;
            }

            &.btnDetail {
              @apply ml-4;

              &:hover {
                @apply bg-white-10;
              }
            }
          }
        }
      }

      // 分页
      .pagination {
        @apply h-10 text-center pt-2;

        .items {
          @apply mr-4;

          .item {
            @apply h-1 w-1 rounded ml-2;

            &.itemActive {
              @apply w-1;
            }
          }
        }
      }
    }
  }
}
